<template>
    <el-card class="mylogin" style="max-width: 400px">
      <template #header>
        <div class="card-header">
          <img src="/src/assets/login.png">
        </div>
      </template>
      <el-form ref="loginFormRef" hide-required-asterisk :model="loginForm" label-width="60" style="max-width: 600px" :rules="rules">
        <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="表单登录" name="first">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="loginForm.username" placeholder="Please input username"/>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="loginForm.password" type="password" placeholder="Please input password" show-password />
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="验证码登录" name="second">
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="loginForm.phone" placeholder="Please input phone number"/>
            </el-form-item>
            <el-form-item label="验证码" prop="code">
              <el-row :gutter="10">
                <el-col :span="14">
                  <el-input v-model="loginForm.code" placeholder="请输入验证码"/>
                </el-col>
                <el-col :span="10">
                  <el-button type="primary" @click="sendMsg" :disabled="isCaptchaButtonDisabled">{{ captchaButtonText }}</el-button>
                </el-col>
              </el-row>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="微信登录" name="third">
            二维码登录。。。。
          </el-tab-pane>
        </el-tabs>
        <el-form-item>
          <el-button color="#626aef" type="primary" @click="loginSubmit">登录</el-button>
          <el-button color="#626aef" plain @click="resetSubmit">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { get, post } from '@/myaxios'
import router from '@/router'
import { ElMessage } from 'element-plus'
import SlideVerify from 'vue3-slide-verify'
import "vue3-slide-verify/dist/style.css"
import useloginUserStore from '../stores/loginUser'

// 对话框可见性
const dialogVisible = ref(false)

// 卡片绑定数据
const activeName = ref('first')

// 获得登录表单对象 可以调用表单的函数
const loginFormRef = ref()
const loginUserStore = useloginUserStore()

// 登录数据表单
const loginForm = reactive({
  username: '',
  password: '',
  phone: '',
  code: ''
})

// 表单登录提交
const loginSubmit = async () => {
  let resp

  if (activeName.value === 'first') {
    // 表单登录
    resp = await post('/user/doLogin', loginForm)
  } else if (activeName.value === 'second') {
    // 手机号验证码登录
    resp = await post('/user/phone', loginForm)
  } else {
    ElMessage.error("请选择登录方式")
    return
  }

  console.log(resp)
  if (resp.data.code == 200) {
    // success 
    ElMessage.success("登录成功")
    loginUserStore.userModel.uid = resp.data.data.uid
    loginUserStore.userModel.userInfo = resp.data.data
    router.push("/main")
  } else {
    ElMessage.error(resp.data.message || "用户名或密码不对")
  }
}

// 发送验证码
const isCaptchaButtonDisabled = ref(false)
const captchaButtonText = ref('点击发送')
const sendMsg = async () => {
  let resp = await get('/user/smsSend', loginForm)
  console.log(resp)

  // 发送后按钮进入60秒倒计时
  if (resp.data.code === 200) { // 假设返回码为200表示成功发送验证码
    isCaptchaButtonDisabled.value = true
    let timeLeft = 60
    const timer = setInterval(() => {
      if (timeLeft <= 0) {
        clearInterval(timer)
        isCaptchaButtonDisabled.value = false
        captchaButtonText.value = '点击发送'
      } else {
        captchaButtonText.value = `${timeLeft}秒后重新发送`
        timeLeft--
      }
    }, 1000) // 每秒更新一次
  } else {
    ElMessage.error("发送验证码失败，请重试")
  }
}

// 重置登录表单
const resetSubmit = () => {
  loginFormRef.value.resetFields()
}
</script>

<style scoped>
    .mylogin{
        margin: 15% auto;
        background-color: #cfcfebb6;
    }
</style>